import { DatasetDataListItemType } from '@/types/dataset';
import { Input, Modal, ModalProps, Tabs } from 'antd';
import { useEffect, useState } from 'react';

const { TextArea } = Input;

type Props = {
  onConfirm?: (q: string, a: string) => void;
  data?: DatasetDataListItemType;
} & ModalProps;

const NewChunkModal = ({ data, onConfirm, ...props }: Props) => {
  const [q, setQ] = useState('');
  const [a, setA] = useState('');

  const onOk = () => {
    const quesetion = q.trim();
    const answer = a.trim();
    onConfirm && onConfirm(quesetion, answer);
  };

  useEffect(() => {
    // if (!props.open) {
    //   setQ('');
    //   setA('');
    // }
    if (data) {
      setA(data.a);
      setQ(data.q);
    }
  }, [data]);

  return (
    <Modal {...props} onOk={onOk} width={'60%'} destroyOnClose={true}>
      <div className="mt-4" style={{ height: 'calc(60vh)' }}>
        <Tabs
          defaultActiveKey="1"
          // onChange={onChange}
          items={[
            {
              label: `分块内容`,
              key: '1',
              children: (
                <div className="flex h-full flex-row gap-2">
                  <div className="h-full w-1/2">
                    <div>主要内容</div>
                    <div className="mt-2 h-full">
                      <TextArea
                        bordered={false}
                        style={{ height: '50vh', resize: 'none' }}
                        maxLength={10000}
                        placeholder="该内容通常是对于知识点的描述, 也可以是用户的问题,最多10000字"
                        className="collection-detail-input h-full"
                        value={q}
                        onChange={(e) => setQ(e.target.value)}
                      />
                    </div>
                  </div>
                  <div className="w-1/2">
                    <div>辅助数据</div>
                    <div className="mt-2">
                      <TextArea
                        bordered={false}
                        style={{ height: '50vh', resize: 'none' }}
                        maxLength={15000}
                        placeholder="该内容通常是为了与前面内容配合, 构建结构化提示词, 用于特殊场景, 最多15000字"
                        className="collection-detail-input"
                        value={a}
                        onChange={(e) => setA(e.target.value)}
                      />
                    </div>
                  </div>
                </div>
              ),
            },
            // {
            //   label: `数据索引`,
            //   key: '2',
            //   children: `Content of Tab Pane 2`,
            // },
          ]}
        />
      </div>
    </Modal>
  );
};

export default NewChunkModal;
